<template>
  <div class="b-customize-brand-card relative"
       :style="{backgroundColor:bg}">
    <div :class="['b-customize-brand-card__header flex justify-between items-center relative',headerCls]"
         :style="{
      'border-bottom': collapse ? '0':'1px solid rgba(0, 0, 0, 0.08)'
    }">
      <slot name="title">
        <span>{{title}}</span>
      </slot>
      <slot name="action">
        <ZIcon icon="el-icon-arrow-up"
               class="cursor-pointer"
               :size="12"
               color="rgba(0,0,0,0.9000)"
               @click.native.stop="toggle"
               v-if="collapse" />
        <ZIcon icon="el-icon-arrow-down"
               class="cursor-pointer"
               :size="12"
               color="rgba(0,0,0,0.9000)"
               v-else
               @click.native.stop="toggle" />

      </slot>
    </div>
    <template v-if="!collapse">
      <div :class="['b-customize-brand-card__content flex flex-col relative',bodyCls]">
        <slot></slot>
      </div>
      <div :class="['b-customize-brand-card__footer  flex justify-between items-center relative',footerCls]"
           v-if="$slots.footer">
        <slot name="footer"></slot>
      </div>
    </template>

  </div>
</template>

<script>
import ZIcon from '@/components/storybook/z-icon'

export default {
  name: 'BCustomizeBrandCard',
  components: {
    ZIcon
  },
  props: {
    headerCls: String,
    bodyCls: String,
    footerCls: String,
    title: String,
    bg: {
      type: String,
      default: '#ffffff'
    }
  },
  data () {
    return {
      collapse: false
    }
  },
  methods: {
    toggle () {
      this.collapse = !this.collapse
    }
  }
}
</script>
<style lang="scss" scoped>
.b-customize-brand-card {
  border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  &__header {
    height: 40px;
    padding: 0 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
  }
  &__content {
    padding: 12px;
  }
  &__footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 12px;
  }
}
</style>
